@extends('admin.layouts.admin')
@section('header') <link rel="stylesheet" href="{{ asset('admin/style/admin.css') }}" media="all"> @endsection
@section('content')
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline lay-search">
                            <input type="text" name="username" placeholder="用户名" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline lay-search">
                            <select name="role" id="role"  lay-search="">
                                <option value="">选择角色</option>
                                @foreach($role as $val)
                                    <option value="{{$val['id']}}">{{$val['display_name']}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <div class="layui-input-inline lay-search" style="width: 300px">
                            <input type="text" name="created_at" class="layui-input" id="sel_datetime" placeholder="创建时间：开始时间 - 结束时间" >
                        </div>
                    </div>

                    <div class="layui-inline">
                        @include('admin.layouts._layout.form_search')
                    </div>
                </div>
            </div>

            <div class="layui-card-body">
                <div style="padding-bottom: 10px;">
                    @include('admin.layouts._layout.form_button_top')
                </div>

                <table id="LAY-form" lay-filter="LAY-form"></table>

                <script type="text/html" id="tpl_name">
                    <span>@{{d.html}} @{{d.name}}</span>
                </script>

                <script type="text/html" id="table-controller">
                    @{{#  if(d.id == 1){ }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                    <a class="layui-btn layui-btn-disabled layui-btn-xs" lay-event=""><i class="layui-icon layui-icon-delete"></i>删除</a>
                    @{{#  } else { }}
                    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
                    @{{#  } }} </script>
            </div>
        </div>
    </div>
    <form id="destroy_form" method="post">{{ csrf_field() }} {{ method_field('DELETE') }}</form>
@endsection
@section('scripts')
    <script>
        layui.config({
            base: '../' //静态资源所在路径
        }).use([ 'table', 'form', 'laydate'], function(){
            var $ = layui.$
                ,form = layui.form
                ,table = layui.table
                ,laydate = layui.laydate;

            var _actions = 'admin';

            //日期时间范围
            laydate.render({
                elem: '#sel_datetime'
                ,type: 'datetime'
                ,range: true
            });

            /**
             * 表格列表
             */
            var cols = [[
                {type: "checkbox",fixed: "left"},
                {type: "numbers",title: "ID"},
                {field: "id",title: "用户ID"},
                {field: "name",title: "用户名"},
                {field: "roles_name",title: "权限"},
                {field: "created_at",title: "创建时间",},
                {title: "操作",toolbar: "#table-controller",width: 150}
                ]];
            var initTable = Common.initTable(cols);

            /**
             * 监听搜索
             */
            form.on('submit(LAY-search)', function(data){
                Common.search(data,1);
            });

            /**
             * 监听重置
             */
            form.on('submit(LAY-reset)', function(data){
                $('.lay-search input').val('');
                $(".layui-form select").find("option:first").prop("selected", true);
                form.render();
                Common.search(data,2);
            });

            /**
             * 监听锁定操作
             */
            form.on('checkbox(lockDemo)', function(obj){
                // layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
                var url = "{:url('SystemConfigCategory/setStatus')}?id=" + this.value;
                Common.setStatus(url)
            });
            /**
             * 监听排序
             */
            table.on('sort(LAY-form)', function(obj){
                Common.sort(obj);
            });

            /**
             * 监听单元格编辑
             **/
            table.on('edit(LAY-form)', function(obj){
                var postUrl = "/admin/admin/update/" + obj.data.id
                Common.editCols(postUrl,obj);
            });

            /**
             * 操作监听 删除和修改
             * @controllers del edit
             */
            table.on("tool(LAY-form)", function(e) {
                if ("del" === e.event) {
                    var postUrl = "/admin/admin/destroy" ;
                    Common.deleteTable(postUrl,e);
                }else if ("edit" === e.event) {
                    var type = 2;
                    var title = '编辑';
                    var modalUrl = "/admin/" + _actions + "/edit/" + e.data.id;
                    var postUrl = "/admin/" + _actions + "/update/" + e.data.id;
                    var width = '800px';
                    var height = '650px';
                    Common.editTable(type, title, modalUrl, postUrl, width, height);
                }
            });

            /**
             * 事件 添加和批量删除
             * @controllers {batchdel: batchdel, add: add}
            */
            $('.layui-btn.layuiadmin-btn-search').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            var active = {
                batchdel: function(){
                    //删除包含子栏目，以及对应的文章，所以不进行批量删除
                    return layer.msg('无法批量删除', {
                        icon: 2
                        ,time: 1000
                    });
                }
                ,add: function(){
                    var title = '添加';
                    var modalUrl = "/admin/" + _actions + "/create";
                    var postUrl = "/admin/" + _actions + "/store";
                    var width = '800px';
                    var height = '650px';
                    Common.addTable(title, modalUrl, postUrl, width, height);
                }
            };
        });//use

    </script>
@stop
